{extend name="_layout/default" /}

{block name="header"}
<style>
    a{color: inherit;text-decoration: none}
    .color-btfilm{color: #19b393}
    .btfilm-btn{background-color: #1ab394 !important;color: #fff !important;}

    .input-group{border-collapse: separate;width: 100%}
    .input-group .form-control {
        width: 100%;
        margin-bottom: 0;
    }
    .input-group select{
        border-radius: 0;
        width: 100%;
        margin-bottom: 0;
    }

    select.input-lg {
        height: 46px;
        line-height: 46px;
    }
    .form-control{
        background-color: #FFF;
        border: 1px solid #e5e6e7;
        padding: 6px 12px;
        transition: border-color .15s ease-in-out 0s,box-shadow .15s ease-in-out 0s;
        font-size: 14px;
    }
    .input-lg {
        height: 46px;
        padding: 10px 16px;
        font-size: 16px;
        line-height: 1.3333333;
        border-radius: 6px;
    }
</style>

{/block}


{block name="main"}
<div class="mdui-container mdui-shadow-1 mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink" style="padding: 15px 35px 15px;border-radius: 5px;">
    <!-- 在超小屏幕设备上，第一列 100% 宽度，第二列 50% 宽度。在小屏幕及以上设备上，第一列为 66.6% 宽度，第二列为 33.3% 宽度。 -->
    <form style="margin: 0">
        <div class="mdui-row">
            <div class="mdui-col-sm-2">
                <div class="input-group" style="width: 100%;">
                    <select class="form-control input-lg" name="site">
                        {volist name="sites" id="vo"}
                        <option value="{$key}" {eq name="key" value="$site"}selected{/eq}>{$vo['type'] ? $vo['type'] : '接口' . ($key+1)}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="mdui-col-sm-8">
                <div class="input-group" style="width: 100%;">
                    <input id="play-url" class="form-control input-lg" type="text" name="url" value="{$url}"  placeholder="输入vip视频播放地址，如：http://v.youku.com/v_show/id_XMTU1OTAwMDU2MA==.html">
                </div>
            </div>
            <div class="mdui-col-sm-1">
                <button type="submit" class="mdui-btn mdui-btn-block mdui-color-teal-400 mdui-ripple" style="height: 46px;color: #FFF!important;">立即播放</button>
            </div>
            <div class="mdui-col-sm-1">
                <button type="button" class="mdui-btn mdui-btn-block mdui-color-teal-50 mdui-ripple" style="height: 46px;" id="mobile-see-btn">手机观看</button>
            </div>
        </div>
    </form>
</div>

{notempty name="url"}
<div class="mdui-container mdui-video-container mdui-shadow-1 mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink" style="padding: 30px 35px 30px;margin-top: 20px;height: 550px">
    <!-- 在超小屏幕设备上，第一列 100% 宽度，第二列 50% 宽度。在小屏幕及以上设备上，第一列为 66.6% 宽度，第二列为 33.3% 宽度。 -->
    <iframe  scrolling="no" allowtransparency="true" allowfullscreen="true" frameborder="0" src="{$play_url}"></iframe>
</div>
{/notempty}

<div class="mdui-dialog" id="qrcode-dialog" style="width: 350px">
    <div class="mdui-dialog-title">请扫描二维码</div>
    <div class="mdui-dialog-content" id="qrcode-img">

    </div>
    <div class="mdui-dialog-actions">

    </div>
</div>

<a href="{:url('/vip/help')}" class="mdui-fab mdui-fab-fixed"  style="bottom: 60px"><i class="mdui-icon material-icons">help</i></a>
{/block}


{block name="footer"}
<script src="/static/js/plugs/qrcode/qrcode.min.js"></script>
<script>
    let $$ = mdui.JQ;
    $$(function () {
        let qrcode = new QRCode('qrcode-img', {
            text: window.location.href,
            width: 300,
            height: 300,
            colorDark : '#000000',
            colorLight : '#ffffff',
            correctLevel : QRCode.CorrectLevel.H
        });


        $$('#mobile-see-btn').on('click', function () {
            let inst = new mdui.Dialog('#qrcode-dialog');
            inst.open();
        });


    });

</script>
{/block}